<!--
 * @Descripttion: 审核页详情
 * @version: 
 * @@Company: None
 * @Author: 孤鹜
 * @Date: 2022-02-27 16:25:35
 * @LastEditors: 孤鹜
 * @LastEditTime: 2022-03-05 10:46:06
-->
<template>
  <el-container class="basic_box">
    <el-main class="basic_main">
      <!-- 头部信息，包含标题、作者名、帖子类型标记等 -->
      <el-header class="user_basic_info">
        <h1 v-if="blogTitle">{{blogTitle}}</h1>
        <div class="userBlock">
          <img :src="userImg" v-if="userImg" class="userImg"/>
          <div class="userImg" v-else></div>
          <div>{{username}}</div>
        </div>
        <el-container class="tagAndType">
          <el-tag v-if="tagInfo" type="primary">{{'#' + tagInfo}}</el-tag>
          <el-tag v-if="typeInfo" type="warning">{{typeInfo}}</el-tag> 
        </el-container>
      </el-header>
      <!-- 主要信息区域，包含图片以及详细信息 -->
      <el-main class="infoMain">
        <el-container class="mainImgGroup" v-if="infoImg">
          <img v-for="(item, idx) of infoImg" :key="idx" :src="item" class="infoImg"/>
        </el-container>
        <el-container class="mainImgGroup" v-else>
        </el-container>
        <el-container class="infoMsg">
          {{infoMsg}}
        </el-container>
      </el-main>
      <!-- 尾部按钮区，复用一个组件，不同情况时显示按钮情况不同 -->
      <el-footer class="buttonGroup" v-if="isApproved == 0">
        <el-button type="primary" plain @click="approve">通 过</el-button>
        <span></span>
        <el-button type="danger" plain @click="deleteItem">删 除</el-button>
      </el-footer>
      <el-footer class="buttonGroup" v-if="isApproved == -1 || isApproved == 1">
        <el-button type="info" @click="resetItem">恢 复</el-button>
      </el-footer>
      <el-footer class="buttonGroup" v-if="isApproved == 2">
        <el-button type="info" @click="returnFunc">返 回</el-button>
      </el-footer>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      /**
       * 以下为详情页信息
       * 标题、用户头像url、用户名、标记信息、类型信息、详情图片url数组、详情信息
       */
      blogTitle: '',
      userImg: '',
      username: '',
      tagInfo: '',
      typeInfo: '',
      infoImg: [],
      infoMsg: '',
      // 当前审核状态，0 未审核、 1 已审核、 -1 已删除，其余数字代表不必审核信息
      isApproved: 0,
      // 类别，其中 0 为帖子、 1 为博客文章、6 为用户反馈信息
      isClass: 0,
      // 传入想要渲染的信息id
      id: '',
    }
  },
  mounted() {
    // 从路由中获取信息，从路由中获取的信息是字符串，需要转化为数字使用
    this.id = this.$route.query.id
    this.isClass = parseInt(this.$route.query.isClass)
    this.isApproved = parseInt(this.$route.query.isApproved)

    // 根据路由中读取的信息进行渲染
    this.func()
  },
  methods: {
    func() {
      // 0 帖子情况
      if(this.isClass === 0) {
        axios({
          method: "post",
          url: "getThePost",
          data: {
            post_id: this.id
          }
        })
        .then(async (create_res) => {
          let res = create_res.data.data
          this.infoMsg = res.info
          this.tagInfo = res.tag
          this.typeInfo = res.type
          this.username = res.username
          this.isApproved = res.status 
          this.infoImg = res.info_img

          await axios({
            method: "post",
            url: "getUserBasic",
            data: {
              username: this.username
            }
          })
          .then((userRes) => {
            this.userImg = userRes.data.data.avatar
          })
        })
      }
      // 1 博客文章
      else if(this.isClass === 1) {
        axios({
          method: "post",
          url: "getTheFindList",
          data: {
            blog_id: this.id
          }
        })
        .then(async (create_res) => {
          let res = create_res.data.data.res
          let res1 = create_res.data.data.res1
          this.blogTitle = res.title
          this.infoMsg = res1.content
          this.typeInfo = res.type
          this.username = res.username
          this.isApproved = res.status 
          this.infoImg = res1.pic_list

          await axios({
            method: "post",
            url: "getUserBasic",
            data: {
              username: this.username
            }
          })
          .then((userRes) => {
            this.userImg = userRes.data.data.avatar
          })
        })
      }
      // 6 用户反馈
      else {
        axios({
          method: "post",
          url: "getOneFeedback",
          data: {
            fb_id: this.id
          }
        })
        .then(async (create_res) => {
          let res = create_res.data.data[0]
          this.blogTitle = res.feedback
          this.infoMsg = res.feedback
          this.username = res.username
          this.isApproved = 2 
          this.infoImg = res.imgs

          await axios({
            method: "post",
            url: "getUserBasic",
            data: {
              username: this.username
            }
          })
          .then((userRes) => {
            this.userImg = userRes.data.data.avatar
          })
        })
      }
    },
    // 通过按钮
    approve() {
      // 通过按钮， isclass === 0，更新帖子的status状态为已审核1
      if(!this.isClass) {
        axios({
          method: 'post',
          url: 'updatePostStatus',
          data: {
            id: this.id,
            status: 1
          }
        })
        .then((res) => {
          // 获取当前状态信息：类别-审核状态
          let first = this.isClass + 1
          let second = this.isApproved == -1 ? 3 : this.isApproved + 1
          
          this.isApproved = 1

          this.$router.push({
            path: '/Examine',
            query: {
              defaultIndex: `${first}-${second}`
            }
          })
        })
      }
      // 通过按钮， isclass === 1，更新博客文章的status状态为已审核1
      else {
        axios({
          method: 'post',
          url: 'updateBlogStatus',
          data: {
            id: this.id,
            status: 1
          }
        })
        .then((res, res1) => {
          // 获取当前状态信息：类别-审核状态
          let first = this.isClass + 1
          let second = this.isApproved == -1 ? 3 : this.isApproved + 1
          
          this.isApproved = 1

          this.$router.push({
            path: '/Examine',
            query: {
              defaultIndex: `${first}-${second}`
            }
          })
        })
      }
    },
    // 删除按钮
    deleteItem() {
      // 通过按钮， isclass === 0，更新帖子的status状态为已删除-1
      if(!this.isClass) {
        axios({
          method: 'post',
          url: 'updatePostStatus',
          data: {
            id: this.id,
            status: -1
          }
        })
        .then((res) => {
          // 获取当前状态信息：类别-审核状态
          let first = this.isClass + 1
          let second = this.isApproved == -1 ? 3 : (this.isApproved + 1) 
          
          this.isApproved = -1

          this.$router.push({
            path: '/Examine',
            query: {
              defaultIndex: `${first}-${second}`
            }
          })
        })
      }
      // 通过按钮， isclass === 1，更新博客文章的status状态为已删除-1
      else {
        axios({
          method: 'post',
          url: 'updateBlogStatus',
          data: {
            id: this.id,
            status: -1
          }
        })
        .then((res, res1) => {          
          // 获取当前状态信息：类别-审核状态
          let first = this.isClass + 1
          let second = this.isApproved == -1 ? 3 : this.isApproved + 1 
          
          this.isApproved = -1

          this.$router.push({
            path: '/Examine',
            query: {
              defaultIndex: `${first}-${second}`
            }
          })
        })
      }
    },
    // 恢复为未审核状态按钮
    resetItem() {
      // 通过按钮， isclass === 0，更新帖子的status状态为未审核0
      if(!this.isClass) {
        axios({
          method: 'post',
          url: 'updatePostStatus',
          data: {
            id: this.id,
            status: 0
          }
        })
        .then((res) => {
          // 获取当前状态信息：类别-审核状态
          let first = this.isClass + 1
          let second = this.isApproved == -1 ? 3 : (this.isApproved + 1) 
          
          this.isApproved = 0

          this.$router.push({
            path: '/Examine',
            query: {
              defaultIndex: `${first}-${second}`
            }
          })
        })
      }
      // 通过按钮， isclass === 1，更新博客文章的status状态为未审核0
      else {
        axios({
          method: 'post',
          url: 'updateBlogStatus',
          data: {
            id: this.id,
            status: 0
          }
        })
        .then((res, res1) => {
          // 获取当前状态信息：类别-审核状态
          let first = this.isClass + 1
          let second = this.isApproved == -1 ? 3 : (this.isApproved + 1) 
          
          this.isApproved = 0

          this.$router.push({
            path: '/Examine',
            query: {
              defaultIndex: `${first}-${second}`
            }
          })
        })
      }
    },
    // 返回审核页按钮
    returnFunc() {      
      // 获取当前状态信息：类别状态
      this.$router.push({
        path: '/Examine',
        query: {
          defaultIndex: `6`
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
html, body {
  height: 100%;
  width: 100%;
}

.basic_box {
  width: 100%;
  box-sizing: border-box;
  padding: 100px 200px;

  .basic_main {
    border: 1px solid #aaa;
    border-radius: 8px;
    background-color: rgba(220, 220, 230, 0.3);
    box-shadow: 5px 8px 7px rgba(200, 200, 210, 0.2);

    box-sizing: border-box;
    padding: 30px 40px 70px 40px;

    .user_basic_info {
      text-align: left;
      // overflow: hidden;
      // min-height: 140px;
      color: #fff;

      .userBlock {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding: 15px 0;
        font-size: 20px;

        .userImg {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #333;
          margin-right: 10px;
        }
      }

      .tagAndType  /deep/ .el-tag--default:first-child {
        margin-right: 10px;
      }
    }

    .infoMain {
      margin-top: 70px;

      .mainImgGroup {
        display: grid;
        grid-template-columns: repeat(3, 32.6%);
        // grid-template-rows: 20vw;
        grid-column-gap: 10px;
        // margin-top: 25px;

        .infoImg {
          width: 100%;
          height: 300px;
        }
      }

      .infoMsg {
        box-sizing: border-box;
        margin: 20px 0;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: normal;
        text-align: left;
        color: #dcdcdf;
        font-size: 18px;
        word-wrap: break-word;
        line-height: 30px;
      }
    }

    .buttonGroup {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      span {
        flex: 0 0 4%;
      }

      /deep/ .el-button {
        flex: 0 0 48%;
        box-sizing: border-box;
        margin: 0;
      }
    }
  }
}
</style>